<template>
    <div class="shop">
        <div class="box">
            <h2>饿了么</h2>
            <van-search v-model="value" shape="round" background="rgb(79, 152, 255)" placeholder="请输入搜索关键词"
                @search="onSearch" />
        </div>
        <div class="tupian">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in bannerlist" :key="index">
                    <img :src="item.bannerUrl" alt="" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <h3>猜你喜欢</h3>
        <div class="span">
            <p>综合排序</p>
            <p @click="yuanjin">距离最近</p>
            <p @click="liang">销量最高</p>
            <p>筛选</p>
            <div class="ssspan">
                <span>年货节热卖</span>
                <span>津贴联盟</span>
                <span>优惠满减</span>
                <span>品质联盟</span>
            </div>
        </div>
        <div class="one-box">
            <div class="one" @click="toshopinfo(item.mtWmPoiId)" v-for="(item, index) in shuju" :key="index">
                <div class="img">
                    <img :src="item.picUrl" alt="" />
                </div>
                <div class="right">
                    <p>{{ item.name }}</p>
                    <p>{{ item.monthSalesTip }}</p>
                    <p>距离：{{ item.distance }}</p>
                    <p>{{ item.averagePriceTip }}元</p>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup>
import { ref, onMounted } from 'vue'

import { shop_list, banner_list } from "../../api"; 

let shuju = ref([])
let bannerlist = ref([])

let yuanjin = () => { 
    shuju.value.sort(function (a, b) {
        return parseFloat(a.distance) - parseFloat(b.distance);
    });
}
let liang = () => { 
    shuju.value.sort(function (a, b) {
        return (
            parseFloat(b.monthSalesTip.slice(2, b.monthSalesTip.length)) -
            parseFloat(a.monthSalesTip.slice(2, a.monthSalesTip.length))
        );
    });
}
onMounted(() => { 
    shop_list({ params: {} }).then((res) => {
        shuju.value = res.data.list;
    });
    banner_list({ params: {} }).then((res) => {
        bannerlist.value = res.data.list;
    });
})


</script>
<style scoped>
.shop {
    padding: 10px;
    overflow: auto;
}

.span {
    display: flex;
    flex-wrap: wrap;
}

.span p {
    padding: 9px;
    margin: 5px 10px;
}

.span span {
    display: inline-block;
    box-sizing: border-box;
    padding: 5px;
    background: gray;
    margin: 2px 10px;
}

.one {
    display: flex;
    margin-top: 10px;
    padding: 10px;
}

.img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
}

.img img {
    width: 100%;
    height: 100%;
}

.box {
    padding: 10px;
    background: rgb(79, 152, 255);
}

h2 {
    color: white;
    margin-bottom: 10px;
}

input {
    width: 100%;
    height: 30px;
    border: 1px solid white;
    border-radius: 20px;
    text-align: center;
}

.tupian {
    height: 100px;
    padding: 10px;
}

.tupian img {
    width: 100%;
    height: 100%;
}

.one-box {
    height: 350px;
    overflow: auto;
}
</style>